<template>
    <div class="task-table-list">
        <el-table
                ref="taskTable"
                :data="tableData"
                :height="tableHeight"
                border
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
                :default-sort="defaultSort">
            <el-table-column
                    type="selection"
                    show-overflow-tooltip
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="编号"
                    width="95"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="taskDetail"
                    label="任务详情"
                    show-overflow-tooltip="true"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="productionCategory"
                    label="产品分类"
                    width="125"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="taskMember"
                    label="任务成员"
                    width="125"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="taskLevel"
                    label="任务级别"
                    width="125"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="publishDate"
                    label="发布日期"
                    width="125"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="expectDate"
                    label="期望完成日期"
                    width="150"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="taskStatus"
                    label="任务状态"
                    width="95"
                    :filters="taskStatusFilter"
                    :filter-method="filterTaskStatus"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag :type="taskStatusType(scope.row.taskStatus)" close-transition>
                        {{scope.row.taskStatus}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleLook(scope.$index, scope.row)">查看</el-button>
                    <el-button size="mini" @click="handleReply(scope.$index, scope.row)">回复</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "TaskListTableList",
        props: {
            tableHeight: {
                required: false,
                type: String,
                default: () => {
                    return "550";
                }
            },
            defaultSort: {
                required: false,
                type: Object,
                default: () => {
                    return {prop: 'number', order: 'descending'};
                }
            }
        },
        computed: {
            taskStatusFilter() {
                return [{text: '已完成', value: '已完成'}, {text: '进行中', value: '进行中'}, {text: '未完成', value: '未完成'}];
            },
        },
        data() {
            return {
                multipleSelection: [],
                tableData: [{
                    number: '10021',
                    taskDetail: '未看内容需要增加更多页面操作，修改设计页面内容',
                    productionCategory: '微刊',
                    taskMember: '赵阳',
                    taskLevel: '非常重要',
                    publishDate: '2009-11-04',
                    expectDate: '2016-05-03',
                    taskStatus: '已完成',
                },{
                    number: '10021',
                    taskDetail: '未看内容需要增加更多页面操作，修改设计页面内容',
                    productionCategory: '微刊',
                    taskMember: '赵阳',
                    taskLevel: '非常重要',
                    publishDate: '2009-11-04',
                    expectDate: '2016-05-03',
                    taskStatus: '已完成',
                },{
                    number: '10021',
                    taskDetail: '未看内容需要增加更多页面操作，修改设计页面内容',
                    productionCategory: '微刊',
                    taskMember: '赵阳',
                    taskLevel: '非常重要',
                    publishDate: '2009-11-04',
                    expectDate: '2016-05-03',
                    taskStatus: '已完成',
                },{
                    number: '10021',
                    taskDetail: '未看内容需要增加更多页面操作，修改设计页面内容',
                    productionCategory: '微刊',
                    taskMember: '赵阳',
                    taskLevel: '非常重要',
                    publishDate: '2009-11-04',
                    expectDate: '2016-05-03',
                    taskStatus: '已完成',
                },{
                    number: '10021',
                    taskDetail: '未看内容需要增加更多页面操作，修改设计页面内容',
                    productionCategory: '微刊',
                    taskMember: '赵阳',
                    taskLevel: '非常重要',
                    publishDate: '2009-11-04',
                    expectDate: '2016-05-03',
                    taskStatus: '已完成',
                },{
                    number: '10021',
                    taskDetail: '未看内容需要增加更多页面操作，修改设计页面内容',
                    productionCategory: '微刊',
                    taskMember: '赵阳',
                    taskLevel: '非常重要',
                    publishDate: '2009-11-04',
                    expectDate: '2016-05-03',
                    taskStatus: '已完成',
                },{
                    number: '10021',
                    taskDetail: '未看内容需要增加更多页面操作，修改设计页面内容',
                    productionCategory: '微刊',
                    taskMember: '赵阳',
                    taskLevel: '非常重要',
                    publishDate: '2009-11-04',
                    expectDate: '2016-05-03',
                    taskStatus: '已完成',
                },{
                    number: '10021',
                    taskDetail: '未看内容需要增加更多页面操作，修改设计页面内容',
                    productionCategory: '微刊',
                    taskMember: '赵阳',
                    taskLevel: '一般',
                    publishDate: '2009-11-04',
                    expectDate: '2016-05-03',
                    taskStatus: '进行中',
                },{
                    number: '10021',
                    taskDetail: '未看内容需要增加更多页面操作，修改设计页面内容',
                    productionCategory: '微刊',
                    taskMember: '赵阳',
                    taskLevel: '重要',
                    publishDate: '2009-11-04',
                    expectDate: '2016-05-03',
                    taskStatus: '未完成',
                },{
                    number: '10021',
                    taskDetail: '未看内容需要增加更多页面操作，修改设计页面内容',
                    productionCategory: '微刊',
                    taskMember: '赵阳',
                    taskLevel: '非常重要',
                    publishDate: '2009-11-04',
                    expectDate: '2016-05-03',
                    taskStatus: '已完成',
                }]
            }
        },
        methods: {
            taskStatusType(taskStatus) {
                switch (taskStatus) {
                    case '已完成':
                        return 'success';
                    case '未完成':
                        return 'danger';
                    case '进行中':
                        return 'default';
                }
            },
            /**
             * 回复
             * @param index
             * @param row
             */
            handleReply(index, row) {
                console.log(index, row);
            },

            /**
             * 查看
             * @param index
             * @param row
             */
            handleLook(index, row) {
                console.log(index, row);
            },
            /**
             * 任务状态过滤
             * @param value
             * @param row
             * @returns {boolean}
             */
            filterTaskStatus(value, row) {
                return row.taskStatus === value;
            },
            /**
             * 行背景色处理
             * @param row
             * @param rowIndex
             * @returns {string}
             */
            tableRowClassName({row, rowIndex}) {
                if (row.taskStatus === '已完成') {
                    return 'success-row';
                } else if (row.taskStatus === '未完成') {
                    return 'success-row';
                } else if (row.taskStatus === '进行中') {
                    return 'default-row';
                }
                return '';
            },
            /**
             * 选中行处理
             * @param val
             */
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

<style lang="scss">
    .task-table-list {

    }
</style>